<template>
  <!-- <el-from>
    <el-form-item label="帖子标题">
      <h1 class="post_title">
        {{ postInfo?.title }}
      </h1>
    </el-form-item>
    <el-form-item label="帖子内容">
      <div v-html="postInfo?.content"></div>
    </el-form-item>
  </el-from> -->
  <section>
    <section class="post_author">
      <!-- <span class="post_title_label">作者:</span> -->
      <el-image loading="lazy" :src="postInfo?.avatar" class="avatar">
        <template #error>
          <el-image
            loading="lazy"
            :src="errorImageUrlConstant"
            class="avatar"
          />
        </template>
      </el-image>
      <span class="username">{{ postInfo?.username }}</span>
    </section>
    <section>
      <h1 class="post_title">
        <span class="post_title_label">文章标题:</span>
        {{ postInfo?.title }}
      </h1>
      <hr class="post_hr" />
      <p v-html="postInfo?.content"></p>
    </section>
  </section>
  <!-- <section>
    <ul></ul>
  </section> -->
</template>
<script lang="ts" setup>
import { useRoute } from "vue-router";
import DOMPurify from "dompurify";
import { errorImageUrlConstant } from "@/constant";

const route = useRoute();
const postInfo = ref();

function decodeHtml() {
  const params = route.query.params as string;
  if (params) {
    const decodedParams = JSON.parse(decodeURIComponent(params));
    decodedParams.content = DOMPurify.sanitize(decodedParams.content);
    postInfo.value = decodedParams;
  }
}

onMounted(() => {
  decodeHtml();
});
</script>

<style scoped>
.post_author {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.username {
  margin-left: 1em;
}

.post_title {
  font-size: 24px;
}

.post_title_label {
  font-size: 18px;
  margin-right: 10px;
  color: gray;
}

.post_hr {
  margin: 1em 0;
}
</style>
